<template>
	<view class="container">
		<view class="content">
			<view class="content-select-one d-rn d-ac d-je">
				<picker @change="bindYearChange" :range="yearArr" range-key="label" class="picker">
					<view class="d-rn d-ac d-jc">
						<view class="picker-con d-cn d-jc">
							<view class="uni-input one-txt-cut" v-if="yearArr[yearIndex]">{{yearArr[yearIndex].label}}
							</view>
						</view>
						<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
					</view>
				</picker>
			</view>
		</view>
		<view class="list">
			<view class="list-one d-rn d-ac d-jb" v-for="(item,index) in payrollList" @click="handleDetails(item.id)">
				<view>{{item.months}}{{ $t('month') }}</view>
				<view class="one-txt-cut">{{userInfo.employeeName}}</view>
				<view>{{ $t('real_wages') }}: <text style="margin-left: 20rpx;" v-if="item.showMoney">{{item.totalMoney}}{{ $t('money') }}</text>
				<text style="color: #196BFF;margin-left: 20rpx;" @click.stop="handleShowMoney(index)" v-else>{{ $t('view') }}</text> 
				</view>
				<view style="color:#196BFF;">{{ $t('download_title') }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPayrollList
	} from "@/api/mine.js"
	export default {
		data() {
			return {
				yearIndex: null,
				yearList: [],
				payrollList: []
			}
		},
		onLoad() {
			this.$store.dispatch("actionGetUserInfo")
			this.getYearData()
		},
		onShow() {
			this.getPayrollList()
		},
		methods: {
			getYearData() {
				this.todayYear = new Date().getFullYear();
				let yearList = [];
				for (var i = this.todayYear - 3; i <= this.todayYear; i++) {
					yearList.push({
						value: i,
						label: i,
					});
				}
				this.yearArr = yearList;
				this.yearIndex = yearList.length - 1
			},
			getPayrollList() {
				getPayrollList({
					years: this.yearArr[this.yearIndex].value
				}).then((res) => {
					this.payrollList = res.data.map((item)=>{
						item.showMoney = false;
						return item;
					})
				})
			},
			bindYearChange(e) {
				this.yearIndex = e.detail.value
				this.getPayrollList();
			},
			handleShowMoney(index) {
				this.payrollList[index].showMoney = true;
				this.$forceUpdate()
			},
			handleDetails(id) {
				this.goLink(`/pages/salaryDetail/index?id=${id}`)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		width: 100%;

		.content {
			.content-select-one {
				background-color: #ffffff;
				padding: 24rpx;
				box-sizing: border-box;

				.bottom {
					width: 16rpx;
					height: 10rpx;
					margin-left: 20rpx;
				}

			}
		}

		.list {
			width: 100%;
			background-color: #ffffff;
			margin-top: 20rpx;

			&-one {
				padding: 24rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;
			}
		}
	}
</style>